.el-steps {
  .el-step {
    .el-step__head {
      .el-step__line {
        background: rgba(0, 0, 0, 0.15);

        .el-step__line-inner {
          display: none;
        }
      }

      .el-step__icon {
        width: 24px;
        height: 24px;
        background: @color-background;
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.25);
        border: 1px solid rgba(0, 0, 0, 0.15);
      }

      &.is-process {
        .el-step__icon {
          background: @theme-color;
          border: none;
          color: #FFFFFF;
        }
      }

      &.is-success,
      &.is-finish {
        .el-step__icon {
          border: 1px solid @theme-color;
          color: @theme-color;
        }
      }
    }

    .el-step__main {
      .el-step__title {
        font-size: 14px;
        color: rgba(0, 0, 0, 0.45);
        line-height: 22px;
        font-weight: 500;

        &.is-success,
        &.is-finish {
          color: rgba(0, 0, 0, 0.65);
        }

        &.is-process {
          color: rgba(0, 0, 0, 0.85);
        }
      }

      .el-step__description {
        font-size: 14px;
        color: rgba(0, 0, 0, 0.45);
        line-height: 22px;
        font-weight: 400;
        margin-top: 0;
        padding-right: 36%;

        &.is-process {
          color: rgba(0, 0, 0, 0.85);
        }

        &.is-success,
        &.is-finish {
          color: rgba(0, 0, 0, 0.65);
        }
      }
    }
  }

  &.el-steps--horizontal {
    .el-step {
      .el-step__head {
        .el-step__line {
          top: 12px;
          margin-left: 32px;
          margin-right: 8px !important;
          height: 1px;
        }

      }

      .el-step__main {
        position: relative;
        padding-left: 32px;

        .el-step__title {
          position: absolute;
          top: -23px;
          left: 32px;
          background-color: @color-background;
          padding-right: 8px;
          white-space: nowrap;
        }


      }
    }
  }


  &[size="big"] {
    .el-step {
      .el-step__head {
        .el-step__line {
          top: 16px;
          margin-left: 40px;
        }

        .el-step__icon {
          width: 32px;
          height: 32px;
        }
      }

      .el-step__main {
        padding-left: 40px;

        .el-step__title {
          top: -28px;
          left: 40px;
          line-height: 24px;
          font-size: 16px;
        }

      }
    }
  }

  &.el-steps--vertical {
    .el-step {
      .el-step__head {
        .el-step__line {
          margin: 32px 0 8px 0;
        }
      }

      .el-step__main {
        padding-left: 8px;

        .el-step__title {
          padding-top: 1px;
          padding-bottom: 4px;
        }
      }
    }
  }

  &.el-steps--simple {
    padding: 0;
    background-color: #fff;
    border-radius: 0;


    .el-step.is-simple {
      flex-basis: auto !important;
      flex: 1;

      .el-step__head {
        display: none;

        .el-step__icon {
          display: none;
        }
      }

      .el-step__main {
        background-color: #F2F2F2;

        .el-step__title {
          font-size: 14px;
          line-height: 44px;
          max-width: 100%;
          justify-content: center;
          display: flex;
          flex-grow: 1;
          color: #333333;

          &.is-process {
            color: #fff;
            background-color: @theme-color;
          }
        }

        .el-step__arrow {
          position: absolute;
          right: -22px;
          width: 44px;
          height: 44px;
          z-index: 1;
          overflow: hidden;

          &::before,
          &::after {
            position: absolute;
            top: 0;
            z-index: 1;
            left: 0px;
            height: 51px;
            width: 15px;
            background: #fff;
          }

          &::after {
            transform: rotate(45deg) translateY(11px);
          }

          &::before {
            transform: rotate(-45deg) translateY(-5px);
          }
        }
      }
    }
  }
}
